<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/user" replace>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>邮箱账单信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">邮箱账单信息</div>
      <el-tabs type="border-card">
        <el-tab-pane v-for="item in billing_check_list" :key="item.bank_type" :label="item.bank">
          <el-tabs type="border-card">
            <el-tab-pane v-for="items in item.sheets" :key="items.billing_info.bank_type"
                         :label="items.billing_info.bank">
              <div>
                <el-row>
                  <el-col :span="4">银行</el-col>
                  <el-col :span="4">{{items.billing_info.bank||'无数据'}}</el-col>
                  <el-col :span="4">银行缩写</el-col>
                  <el-col :span="4">{{items.billing_info.bank_type||'无数据'}}</el-col>
                  <el-col :span="4">授权邮箱</el-col>
                  <el-col :span="4">{{items.billing_info.account_email||'无数据'}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">账户卡号</el-col>
                  <el-col :span="4">{{items.billing_info.account_number||'无数据'}}</el-col>
                  <el-col :span="4">账户姓名</el-col>
                  <el-col :span="4">{{items.billing_info.account_name||'无数据'}}</el-col>
                  <el-col :span="4">性别</el-col>
                  <el-col :span="4">{{items.billing_info.account_gender||'无数据'}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">总积分</el-col>
                  <el-col :span="4">{{items.billing_info.total_point||'无数据'}}</el-col>
                  <el-col :span="4">账单周期</el-col>
                  <el-col :span="4">{{items.billing_info.statement_cycle||'无数据'}}</el-col>
                  <el-col :span="4">账单日</el-col>
                  <el-col :span="4">{{items.billing_info.statement_date||'无数据'}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">信用额度</el-col>
                  <el-col :span="4">{{items.billing_info.credit_limit||'无数据'}}</el-col>
                  <el-col :span="4">可用额度</el-col>
                  <el-col :span="4">{{items.billing_info.credit_available||'无数据'}}</el-col>
                  <el-col :span="4">取现额度</el-col>
                  <el-col :span="4">{{items.billing_info.cash_take_limit||'无数据'}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">到期还款日</el-col>
                  <el-col :span="4">{{items.billing_info.payment_due_date||'无数据'}}</el-col>
                  <el-col :span="4">已出账单金额（人民币）</el-col>
                  <el-col :span="4">{{items.billing_info.payment_amount_rmb||'无数据'}}</el-col>
                  <el-col :span="4">已出账单金额（美元）</el-col>
                  <el-col :span="4">{{items.billing_info.payment_amount_usd||'无数据'}}</el-col>
                </el-row>
              </div>
              <div class="title">账单明细</div>
              <el-table :data="items.payment_info" max-height="700">
                <el-table-column prop="prev_balance" label="上期欠款" align="center"></el-table-column>
                <el-table-column prop="total_balance" label="本期账单余额" align="center"></el-table-column>
                <el-table-column prop="statement_balance" label="本期新增金额" align="center"></el-table-column>
                <el-table-column prop="new_balance" label="本期应还款额" align="center"></el-table-column>
                <el-table-column prop="payed_balance" label="本期已还金额" align="center"></el-table-column>
                <el-table-column prop="adjustment_payment" label="调整还款额" align="center"></el-table-column>
                <el-table-column prop="interest_payment" label="循环利息" align="center"></el-table-column>
                <el-table-column prop="min_payment_rmb" label="本期最低还款额（人民币）" align="center"></el-table-column>
                <el-table-column prop="min_payment_usd" label="本期最低还款额（美元）" align="center"></el-table-column>
              </el-table>
              <div class="title">账单流水</div>
              <el-table :data="items.trans_info" max-height="700">
                <el-table-column prop="trans_date" label="交易日期" align="center"></el-table-column>
                <el-table-column prop="post_date" label="记账日期" align="center"></el-table-column>
                <el-table-column prop="card_tail_number" label="信用卡尾号卡后四位" align="center"></el-table-column>
                <el-table-column prop="trans_currency_amount" label="交易金额" align="center"></el-table-column>
                <el-table-column prop="trans_currency_type" label="交易币种" align="center"></el-table-column>
                <el-table-column prop="trans_type" label="交易类型" align="center"></el-table-column>
                <el-table-column prop="bu_name" label="商户名称、交易说明" align="center"></el-table-column>
              </el-table>
              <div class="title">分期明细</div>
              <el-table :data="items.installment_info" max-height="700">
                <el-table-column prop="installment_date" label="交易日期" align="center"></el-table-column>
                <el-table-column prop="installment_total_amount" label="分期总额" align="center"></el-table-column>
                <el-table-column prop="installment_total_stage" label="分期总期数" align="center"></el-table-column>
                <el-table-column prop="installment_remain_stage" label="分期剩余期数" align="center"></el-table-column>
                <el-table-column prop="installment_current_payment" label="分期当前金额" align="center"></el-table-column>
                <el-table-column prop="installment_current_stage" label="分期当前期数" align="center"></el-table-column>
                <el-table-column prop="installment_current_fee" label="分期当前手续费" align="center"></el-table-column>
                <el-table-column prop="installment_balance" label="分期剩余金额" align="center"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        billing_check_list: []
      }
    },
    created () {
    },
    methods: {},
    components: {}
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .el-tabs {
    .el-tab-pane {
      text-align: center;
      .title {
        font-weight: bold;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        background-color: #2e78f2;
        color: #fff;
      }

      .el-row {
        display: flex;

        .el-col {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 15px 0;
          border-right: 1px solid #eee;
          border-bottom: 1px solid #eee;

          &:nth-child(2n+1) {
            color: #000;
            font-weight: 700;
          }

          &:first-child {
            border-left: 1px solid #eee;
          }
        }

        &:first-child {
          .el-col {
            border-top: 1px solid #eee;
          }
        }
      }
    }
  }
</style>
